<template>
	<div class="article-edit pb60">
		<Form :model="detailInfo" ref="articleEdit" label-position="right" :rules="articleEdit" :label-width="80" action="javascript:void(0)">
			<FormItem label="选择栏目" prop="cateId">
				<TreeSelect clearable v-model="detailInfo.cateId" :data="cateSelect" v-width="200"></TreeSelect>
			</FormItem>
			<FormItem label="文章标题" prop="title">
				<Input v-model="detailInfo.title"></Input>
			</FormItem>
			<FormItem label="关键字" prop="keywords">
				<Input v-model="detailInfo.keywords"></Input>
			</FormItem>
			<FormItem label="文章描述" prop="description">
				<Input type="textarea" v-model="detailInfo.description" :autosize="{minRows:4,maxRows:8}"></Input>
			</FormItem>
			<FormItem label="上传缩略图">
				<upload-thumb v-model="detailInfo.thumb" ref="uploadthumb" :defaultList="thumbList"></upload-thumb>
			</FormItem>
			<FormItem label="文章内容">
				<tinymce-editor ref="editContent" :tinymceValue="detailInfo.content"></tinymce-editor>
			</FormItem>
			<FormItem label="文章模板">
				<Input v-model="detailInfo.tpl" style="width: 200px"></Input>
			</FormItem>
			<FormItem label="是否推荐">
				<i-switch :true-value="1" :false-value="0" v-model="detailInfo.pushFlag" size="large">
					<template #open>是</template>
					<template #close>否</template>
				</i-switch>
			</FormItem>
			<FormItem label="来源">
				<Input v-model="detailInfo.source"></Input>
			</FormItem>
			<FormItem label="是否外链">
				<i-switch :true-value="1" :false-value="0" v-model="detailInfo.linkFlag" size="large">
					<template #open>是</template>
					<template #close>否</template>
				</i-switch>
			</FormItem>
			<FormItem label="外链" v-if="detailInfo.linkFlag == 1">
				<Input v-model="detailInfo.url" placeholder="输入外部链接地址..."></Input>
			</FormItem>
			<FormItem label="排序" prop="sort">
				<InputNumber :max="9999" :min="0" v-model="detailInfo.sort"></InputNumber>
			</FormItem>
			<FormItem label="点击量" prop="hits">
				<InputNumber :max="9999" :min="0" v-model="detailInfo.hits"></InputNumber>
			</FormItem>
			<FormItem label="发布时间">
				<DatePicker :model-value="publishAt" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="发布时间..." style="width: 200px" @on-change="publishAtChange($event)"></DatePicker>
			</FormItem>
			<FormItem>
				<Button style="margin-right: 8px" @click="goBack()">返回</Button>
				<Button type="primary" @click="handleSubmit('articleEdit')">提交</Button>
			</FormItem>
		</Form>
	</div>
</template>

<script>
import UploadThumb from '../.././components/thumb.vue'
import TinymceEditor from '../.././components/tinymce.vue'
export default {
	name: 'ArticleEdit',
	data() {
		return {
			detailId: 0,
			cateSelect: [],
			detailInfo: {
				'cateId': '',
				'title': '',
				'keywords':'',
				'description': '',
				'thumb': '',
				'content': '',
				'tpl':'show',
				'pushFlag':0,
				'source':'',
				'linkFlag': 0,
				'url':'',
				'sort':0,
				'hits':99,
				'publishAt':''
			},
			publishAt:'',
			thumbList: [],
			articleEdit: {
				cateId: [
					{ required: true, type: 'integer', message: '栏目必须填写', trigger: 'change' }
				],
				title: [
					{ required: true, message: '标题必须填写', trigger: 'blur' }
				]
			},
		}
	},
	// 组件
	components: {
		UploadThumb,
		TinymceEditor
	},
	created() {
		this.detailId = this.$route.query.id;
		this.getData(this.detailId);
	},
	methods: {
		publishAtChange(e){
			this.detailInfo.publishAt = e;
			this.publishAt = e;
		},
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (!valid) {
					this.$Message.error('请检查输入的信息是否正确！');
				} else {
					if (this.$refs['uploadthumb'].uploadList.length) {
						this.detailInfo.thumb = this.$refs['uploadthumb'].uploadList[0].url;
					}else{
						this.detailInfo.thumb = '';
					}
					this.detailInfo.content = this.$refs['editContent'].tinymce_value
					var params = this.detailInfo;
					this.$api.article.update(params).then(res => {
                        this.$router.back();
					});
				}
			})
		},
		goBack(){
            this.$router.back();
        },
		getData(id) {
			this.$api.cate.select().then(res => {
                this.cateSelect = res.result;
			});
			this.$api.article.detail({ detailId: id }).then(res => {
                this.detailInfo = res.result;
                this.publishAt = this.detailInfo.publishAt;
                if (res.result.thumb != '' && res.result.thumb != null) {
                    this.thumbList = [{ 'name': '图片文件', 'url': res.result.thumb, 'status': 'finished' }];
                }else{
                    this.thumbList = [];
                }
                this.$refs['editContent'].tinymce_value = res.result.content
			});
		},
	}
}
</script>
